<template>
	<div class="app-container">
		<!--设备发现-->
		<el-col :span="24" :xs="24">
			<el-form
				v-show="showSearch"
				ref="queryForm"
				:model="queryParams"
				:inline="true"
				label-width="68px"
			>
				<el-form-item :label="$t('elButton.equipmentName')" prop="name">
					<el-input
						v-model="queryParams.name"
						:placeholder="$t('elButton.equipmentNameInput')"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item :label="$t('elButton.equipmentType')" prop="type">
					<el-select
						v-model="queryParams.type"
						:placeholder="$t('elButton.equipmentTypeInput')"
					>
						<el-option
							v-for="dict in typeOptions"
							:key="dict.value"
							:label="dict.label"
							:value="dict.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('elButton.establishTime')">
					<el-date-picker
						v-model="dateRange"
						size="small"
						style="width: 240px"
						value-format="yyyy-MM-dd"
						type="daterange"
						range-separator="-"
						:start-placeholder="$t('elButton.startTime')"
						:end-placeholder="$t('elButton.endTime')"
					/>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="mini"
						@click="handleQuery"
						>{{ $t('elButton.search') }}
					</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
						$t('elButton.reset')
					}}</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="loading" :data="deviceList" border>
				<el-table-column
					:label="$t('equipment.number')"
					align="center"
					width="60"
					prop="id"
				/>
				<el-table-column
					:label="$t('equipment.identification')"
					align="center"
					prop="code"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					:label="$t('equipment.name')"
					align="center"
					prop="name"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					:label="$t('equipment.sort')"
					align="center"
					prop="groupName"
				/>
				<el-table-column
					:label="$t('equipment.playStyle')"
					align="center"
					prop="playMode"
					:formatter="playModeFormat"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					:label="$t('equipment.style')"
					align="center"
					prop="type"
					:formatter="typeFormat"
				/>
				<el-table-column
					:label="$t('equipment.resolving')"
					align="center"
					prop="resolution"
				/>
				<el-table-column
					:label="$t('equipment.ip')"
					align="center"
					prop="ipAddress"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					:label="$t('equipment.edition')"
					align="center"
					prop="softVersion"
				/>
				<el-table-column
					:label="$t('equipment.status')"
					align="center"
					prop="status"
					:formatter="statusFormat"
				/>
				<el-table-column
					:label="$t('equipment.onlineStatus')"
					align="center"
					prop="online"
				>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.online === '0'" type="danger">{{
							$t('equipment.isUnderline')
						}}</el-tag>
						<el-tag v-if="scope.row.online === '1'" type="success">{{
							$t('equipment.isOnline')
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('equipment.createTime')"
					align="center"
					prop="createTime"
					width="180"
				>
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.createTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					width="220px"
					:label="$t('equipment.control')"
					align="center"
					class-name="small-padding fixed-width"
					fixed="right"
				>
					<template slot-scope="scope">
						<el-button
							v-if="scope.row.status === '0'"
							v-hasPerm="['device_auth']"
							size="mini"
							type="text"
							icon="el-icon-circle-check"
							@click="handleAuth(scope.row)"
							>{{ $t('elButton.authentication') }}
						</el-button>
						<el-button
							v-hasPerm="['device_edit']"
							size="mini"
							type="text"
							icon="el-icon-edit"
							@click="handleEdit(scope.row)"
							>{{ $t('elButton.change') }}
						</el-button>
						<el-button
							v-hasPerm="['device_edit']"
							size="mini"
							type="text"
							icon="el-icon-info"
							@click="handleDetail(scope.row)"
							>{{ $t('elButton.detail') }}
						</el-button>
						<el-button
							v-hasPerm="['device_del']"
							size="mini"
							type="text"
							icon="el-icon-delete"
							@click="handleDel(scope.row)"
							>{{ $t('elButton.delete') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="total > 0"
				:total="total"
				:page.sync="queryParams.current"
				:limit.sync="queryParams.size"
				@pagination="getList"
			/>
		</el-col>

		<!-- 添加或修改设备对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			:modal-append-to-body="true"
			:append-to-body="true"
			:close-on-click-modal="false"
		>
			<el-form ref="form" :model="form" :rules="rules" label-width="85px">
				<el-row>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.name')" prop="name">
							<el-input
								v-model="form.name"
								:placeholder="$t('equipment.nameInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.identification')" prop="code">
							<el-input
								v-model="form.code"
								:disabled="form.id != undefined ? true : false"
								:placeholder="$t('equipment.identificationInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col v-hasRole="['ROLE_1']" :span="12">
						<el-form-item :label="$t('equipment.company')" prop="deptId">
							<treeselect
								v-model="form.deptId"
								:options="deptOptions"
								:default-expand-level="2"
								:normalizer="deptNormalizer"
								:placeholder="$t('equipment.companySelect')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.sort')" prop="groupId">
							<treeselect
								v-model="form.groupId"
								:options="groupOptions.length ? groupOptions[0].children : []"
								:normalizer="normalizer"
								:placeholder="$t('equipment.sortInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.style')" prop="type">
							<el-select
								v-model="form.type"
								:placeholder="$t('equipment.styleInput')"
							>
								<el-option
									v-for="dict in typeOptions"
									:key="dict.value"
									:label="dict.label"
									:value="dict.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.address')" prop="address">
							<el-input
								v-model="form.address"
								:placeholder="$t('equipment.addressInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="$t('equipment.LatitudeAndLongitude')"
							prop="latitude"
						>
							<el-input
								v-model="form.latitude"
								type="number"
								:placeholder="$t('equipment.longitude')"
								class="swidth"
							/>
							<el-input
								v-model="form.longitude"
								type="number"
								:placeholder="$t('equipment.latitude')"
								class="swidth"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.resolving')" prop="resolution">
							<el-input
								v-model="form.resolution"
								:disabled="true"
								placeholder="$t(equipment.resolvingInput)"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.osVersion')" prop="osVersion">
							<el-input
								v-model="form.osVersion"
								:disabled="true"
								:placeholder="$t('equipment.osVersionInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.mac')" prop="macAddress">
							<el-input
								v-model="form.macAddress"
								:disabled="form.id != undefined ? true : false"
								:placeholder="$t('equipment.macInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.ip')" prop="address">
							<el-input
								v-model="form.ipAddress"
								:disabled="true"
								:placeholder="$t('equipment.ipInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('equipment.remarks')" prop="remarks">
							<el-input
								v-model="form.remarks"
								type="textarea"
								rows="3"
								:placeholder="$t('equipment.remarksInput')"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">{{
					$t('submitText')
				}}</el-button>
				<el-button @click="cancel">{{ $t('cancelText') }}</el-button>
			</div>
		</el-dialog>

		<!-- 认证对话框 -->
		<el-dialog
			:title="$t('equipment.authentication')"
			:visible.sync="authOpen"
			:modal-append-to-body="true"
			:append-to-body="true"
			:close-on-click-modal="false"
		>
			<el-form
				ref="authForm"
				:model="authForm"
				:rules="authRules"
				label-width="85px"
			>
				<el-row>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.name')" prop="name">
							<el-input
								v-model="authForm.name"
								:placeholder="$t('equipment.nameInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.identification')" prop="code">
							<el-input
								v-model="authForm.code"
								:disabled="true"
								placeholder="$t('equipment.identificationInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.company')" prop="deptId">
							<treeselect
								v-model="authForm.deptId"
								:options="deptOptions"
								:normalizer="deptNormalizer"
								:placeholder="$t('equipment.companySelect')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.sort')" prop="groupId">
							<treeselect
								v-model="authForm.groupId"
								:options="groupOptions.length ? groupOptions[0].children : []"
								:normalizer="normalizer"
								:placeholder="$t('equipment.sortInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.style')" prop="type">
							<el-select
								v-model="authForm.type"
								:placeholder="$t('equipment.styleInput')"
							>
								<el-option
									v-for="dict in typeOptions"
									:key="dict.value"
									:label="dict.label"
									:value="dict.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.address')" prop="address">
							<el-input
								v-model="authForm.address"
								:placeholder="$t('equipment.addressInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="$t('equipment.LatitudeAndLongitude')"
							prop="latitude"
						>
							<el-input
								v-model="authForm.latitude"
								type="number"
								:placeholder="$t('equipment.longitude')"
								class="swidth"
							/>
							<el-input
								v-model="authForm.longitude"
								type="number"
								:placeholder="$t('equipment.latitude')"
								class="swidth"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.resolving')" prop="resolution">
							<el-input
								v-model="authForm.resolution"
								:disabled="true"
								:placeholder="$t('equipment.resolvingInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.osVersion')" prop="osVersion">
							<el-input
								v-model="authForm.osVersion"
								:disabled="true"
								:placeholder="$t('equipment.osVersionInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.mac')" prop="address">
							<el-input
								v-model="authForm.macAddress"
								:disabled="true"
								:placeholder="$t('equipment.macInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('equipment.ip')" prop="address">
							<el-input
								v-model="authForm.ipAddress"
								:disabled="true"
								:placeholder="$t('equipment.ipInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('equipment.remarks')" prop="remarks">
							<el-input
								v-model="authForm.remarks"
								type="textarea"
								rows="3"
								:placeholder="$t('equipment.remarksInput')"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button
					v-if="authForm.status === '0' || authForm.status === '3'"
					type="primary"
					@click="authSubmitForm"
				>
					{{ $t('elButton.authentication') }}
				</el-button>
				<el-button @click="authCancel">{{ $t('cancelText') }}</el-button>
			</div>
		</el-dialog>

		<!-- 监控详情对话框 -->
		<el-dialog
			:title="mTitle"
			class="dialog"
			:fullscreen="true"
			:visible.sync="mOpen"
			:modal-append-to-body="true"
			:append-to-body="true"
		>
			<el-row :gutter="10">
				<el-col :span="24" style="margin-bottom: 10px;">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>{{ $t('equipment.detail') }}</span>
							<el-button
								style="float: right; padding: 3px 0"
								type="text"
								@click="getDeviceInfo"
							>
								{{ $t('elButton.refresh') }}
							</el-button>
						</div>
						<div class="el-table el-table--enable-row-hover el-table--medium">
							<table cellspacing="0" style="width: 100%;">
								<tbody>
									<tr>
										<td class="title">
											<div class="cell">{{ $t('equipment.name') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.name }}</div>
										</td>
										<td class="title">
											<div class="cell">
												{{ $t('equipment.identification') }}
											</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.code }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.status') }}</div>
										</td>
										<td>
											<div class="cell">
												<el-tag type="primary">{{
													statusFormat(deviceInfo)
												}}</el-tag>
											</div>
										</td>
									</tr>
									<tr>
										<td class="title">
											<div class="cell">{{ $t('equipment.forCompany') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.deptName }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.ip') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.ipAddress }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.resolving') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.resolution }}</div>
										</td>
									</tr>
									<tr>
										<td class="title">
											<div class="cell">{{ $t('equipment.forSort') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.groupName }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.playStyle') }}</div>
										</td>
										<td>
											<div class="cell">{{ playModeFormat(deviceInfo) }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.playVoice') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.volume }}</div>
										</td>
									</tr>
									<tr>
										<td class="title">
											<div class="cell">{{ $t('equipment.style') }}</div>
										</td>
										<td>
											<div class="cell">{{ typeFormat(deviceInfo) }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.mac') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.macAddress }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.mac') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.address }}</div>
										</td>
									</tr>
									<tr>
										<td class="title">
											<div class="cell">{{ $t('equipment.osVersion') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.osVersion }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.edition') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.softVersion }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.updateTime') }}</div>
										</td>
										<td>
											<div class="cell">{{ deviceInfo.updateTime }}</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</el-card>
				</el-col>
				<el-col :span="24" style="margin-bottom: 10px;">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>{{ $t('equipment.status') }}</span>
							<el-button
								style="float: right; padding: 3px 0"
								type="text"
								@click="getDeviceStatus()"
							>
								{{ $t('elButton.refresh') }}
							</el-button>
						</div>
						<div class="el-table el-table--enable-row-hover el-table--medium">
							<table cellspacing="0" style="width: 100%;">
								<tbody>
									<tr>
										<td class="title">
											<div class="cell">{{ $t('equipment.nowPlaying') }}</div>
										</td>
										<td>
											<div class="cell">{{ statusInfo.curProgram }}</div>
										</td>
										<td class="title">
											<div class="cell">{{ $t('equipment.playingTime') }}</div>
										</td>
										<td>
											<div class="cell">{{ statusInfo.runTime }}分</div>
										</td>
										<td class="title">
											<div class="cell">
												{{ $t('equipment.playingavailMem') }}
											</div>
										</td>
										<td>
											<div class="cell">
												{{ statusInfo.availMem }}/{{ statusInfo.totalMem }}
											</div>
										</td>
										<td class="title">
											<div class="cell">
												{{ $t('equipment.playinguseStorage') }}
											</div>
										</td>
										<td>
											<div class="cell">
												{{ statusInfo.useStorage }}/{{
													statusInfo.totalStorage
												}}
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</el-card>
				</el-col>
				<el-col :span="18">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>{{ $t('equipment.nowChanel') }}</span>
							<el-button
								style="float: right; padding: 3px 0"
								type="text"
								@click="getDeviceScheduling"
							>
								{{ $t('elButton.refresh') }}
							</el-button>
						</div>
						<el-table
							:data="schedulingList"
							style="width: 100%"
							:border="true"
							:stripe="true"
						>
							<el-table-column
								prop="name"
								:label="$t('equipment.channelName')"
							/>
							<el-table-column
								prop="type"
								:label="$t('equipment.channelType')"
								width="100px"
							>
								<template slot-scope="scope">
									<el-tag v-if="scope.row.type == '0'" type="info">{{
										$t('equipment.channelType1')
									}}</el-tag>
									<el-tag v-if="scope.row.type == '1'">{{
										$t('equipment.channelType2')
									}}</el-tag>
									<el-tag v-if="scope.row.type == '2'" type="danger">{{
										$t('equipment.channelType3')
									}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column
								prop="playMode"
								:label="$t('equipment.channelMode')"
								width="120px"
							>
								<template slot-scope="scope">
									<el-tag v-if="scope.row.playMode == '0'" type="info">{{
										$t('equipment.channelMode1')
									}}</el-tag>
									<el-tag v-if="scope.row.playMode == '1'" type="success">{{
										$t('equipment.channelMode2')
									}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column
								prop="startDate"
								:label="$t('equipment.channelPlayDate')"
							>
								<template slot-scope="scope">
									<span>{{
										`${parseTime(scope.row.startDate, '{y}-{m}-{d}')}` +
											$t('untils') +
											`${parseTime(scope.row.stopDate, '{y}-{m}-{d}')}`
									}}</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="startTime"
								:label="$t('equipment.channelPlayTime')"
							>
								<template slot-scope="scope">
									<span>{{
										`${scope.row.startTime}` +
											$t('untils') +
											`${scope.row.stopTime}`
									}}</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="checkTime"
								:label="$t('equipment.channelRelease')"
								width="100px"
							>
								<template slot-scope="scope">
									<span>{{ parseTime(scope.row.checkTime) }}</span>
								</template>
							</el-table-column>
							<!--<el-table-column
                :label="$t('equipment.control')"
                width="80px">
                <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-delete" @click="handleClickDeleteVersion(scope)">删除</el-button>
                </template>
              </el-table-column>-->
						</el-table>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>{{ $t('equipment.capture') }}</span>
							<el-button
								type="text"
								style="float: right; padding: 3px 0"
								@click="getDeviceInfo"
							>
								{{ $t('elButton.refresh') }}
							</el-button>
							<el-button
								v-hasPerm="['device_screenshot']"
								type="text"
								style="float: right; padding: 3px 10px"
								@click="screenshot"
								>{{ $t('elButton.capture') }}
							</el-button>
						</div>
						<el-image
							:src="
								deviceInfo.shotImg != ''
									? baseApi + deviceInfo.shotImg
									: defShotImg
							"
							height="278"
						/>
						<div class="shotTime">
							{{ $t('equipment.updateTime') }}：{{ deviceInfo.shotTime }}
						</div>
					</el-card>
				</el-col>
			</el-row>
			<div slot="footer" class="dialog-footer">
				<el-button @click="mClose">{{ $t('closeText') }}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
// 设备发现
import {
	listDevice,
	getDevice,
	editDevice,
	delDevice,
	getStatusInfo,
	shotImage,
} from '@/api/ips/device'
import { getAccessToken } from '@/data/user'
import { listScheduling } from '@/api/ips/scheduling'
import { getLabelByValInTree } from '@/utils/obj-util'
import { deptTree } from '@/api/system/dept'
import { groupTree } from '@/api/ips/group'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
	name: 'Discovery',
	components: { Treeselect },
	data() {
		return {
			// 设备表格数据
			deviceList: [],
			// 状态字典
			typeOptions: [],
			// 播放模式
			playModeOptions: [],
			// 遮罩层
			loading: true,
			total: 0,

			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 总条数

			statusOptions: [], // 查询参数
			// 版本表格数据
			versionList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
				status: 0,
				deptId: undefined,
				name: undefined,
				groupName: undefined,
				type: undefined,
				createTime: undefined,
			},
			// 显示搜索条件
			showSearch: true,
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				name: [
					{
						required: true,
						message: this.$t('edition.nameEmpty'),
						trigger: 'blur',
					},
				],
				code: [
					{
						required: true,
						message: this.$t('edition.numberEmpty'),
						trigger: 'blur',
					},
				],
				type: [
					{
						required: true,
						message: this.$t('edition.styleEmpty'),
						trigger: 'blur',
					},
				],
				appDesc: [
					{
						required: true,
						message: this.$t('edition.explainEmpty'),
						trigger: 'blur',
					},
				],
			},
			deptOptions: [],
			groupOptions: [],
			authOpen: false,
			// 认证表单参数
			authForm: {},
			// 认证表单校验
			authRules: {
				name: [
					{
						required: true,
						message: this.$t('equipment.nameEmpty'),
						trigger: 'blur',
					},
				],
				type: [
					{
						required: true,
						message: this.$t('equipment.styleEmpty'),
						trigger: 'blur',
					},
				],
				groupId: [
					{
						required: true,
						message: this.$t('equipment.sortEmpty'),
						trigger: 'blur',
					},
				],
			},
			// 选中的分组ID 批量清空节目、音量控制、电源控制、认证、定时开关机用
			mOpen: false,
			mTitle: this.$t('equipment.monitoring'),
			schedulingList: [],
			deviceInfo: {},
			statusInfo: {
				curProgram: '无',
				runTime: 0,
				availMem: 0,
				totalMem: 0,
				useStorage: 0,
				totalStorage: 0,
			},

			VUE_APP_BASE_API: process.env.VUE_APP_BASE_API,
			baseApi: process.env.VUE_APP_BASE_API,
			getAccessToken,
		}
	},
	created() {
		this.getList()
		this.getGroupTree()
		this.getDicts('device_type').then((response) => {
			this.typeOptions = response.data
		})
		this.getDicts('auth_status').then((response) => {
			this.statusOptions = response.data
		})
		this.getDicts('play_mode').then((response) => {
			this.playModeOptions = response.data
		})
	},
	mounted() {
		this.$nextTick(() => {
			this.getDeptTree()
		})
	},
	methods: {
		/** 查询未认证设备列表 */
		getList() {
			this.loading = true
			listDevice(this.addDateRange(this.queryParams, this.dateRange)).then(
				(response) => {
					this.deviceList = response.data
					this.total = response.total
					this.loading = false
				}
			)
		},
		// 设备类型字典翻译
		typeFormat(row, column) {
			return this.selectDictLabel(this.typeOptions, row.type)
		},
		// 状态字典翻译
		statusFormat(row, column) {
			return this.selectDictLabel(this.statusOptions, row.status)
		},
		// 播放模式字典翻译
		playModeFormat(row, column) {
			return this.selectDictLabel(this.playModeOptions, row.playMode)
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				code: undefined,
				name: undefined,
				type: undefined,
				qrcode: undefined,
				appUrl: undefined,
				appDesc: undefined,
				count: undefined,
				deptId: undefined,
				createBy: undefined,
				createTime: undefined,
				delFlag: undefined,
			}
			this.resetForm('form')
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1
			this.getList()
		},
		handleDetail(row) {
			const id = row.id || this.ids
			getDevice(id).then((response) => {
				this.deviceInfo = response.data
				this.mOpen = true
				this.title = this.$t('equipment.equipmentDetail')
				// 获取设备状态
				this.getDeviceStatus()
				// 获取频道数据
				this.getDeviceScheduling()
			})
		},
		/** 修改按钮操作 */
		handleEdit(row) {
			this.reset()
			const id = row.id || this.ids
			getDevice(id).then((response) => {
				this.form = response.data
				this.open = true
				this.title = this.$t('equipment.changeEquipment')
			})
		},
		/** 删除按钮操作 */
		handleDel(row) {
			const ids = row.id || this.ids
			this.$confirm(
				this.$t('equipment.deleteEquipment1') +
					ids +
					this.$t('equipment.deleteEquipment2'),
				this.$t('tip'),
				{
					confirmButtonText: this.$t('submitText'),
					cancelButtonText: this.$t('cancelText'),
					type: 'warning',
				}
			)
				.then(function() {
					return delDevice(ids)
				})
				.then(() => {
					this.getList()
					this.msgSuccess(this.$t('deleteSuccess'))
				})
				.catch(function() {})
		},
		getDeviceInfo() {
			getDevice(this.deviceInfo.id).then((response) => {
				this.deviceInfo = response.data
			})
		},
		getDeviceStatus() {
			getStatusInfo(this.deviceInfo.code).then((response) => {
				this.statusInfo = response.data
			})
		},
		getDeviceScheduling() {
			listScheduling({
				devices: this.deviceInfo.code,
				current: 1,
				size: 10,
			}).then((response) => {
				this.schedulingList = response.data
			})
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.form.deptName = getLabelByValInTree(
						this.deptOptions,
						this.form.deptId,
						{
							label: 'name',
							value: 'deptId',
						}
					)
					if (this.form.id !== undefined) {
						editDevice(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('loginLog.changeSuccess'))
								this.open = false
								this.getList()
							} else {
								this.msgError(response.msg)
							}
						})
					} else {
						// eslint-disable-next-line no-undef
						addDevice(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('addSuccess'))
								this.open = false
								this.getList()
							} else {
								this.msgError(response.msg)
							}
						})
					}
				}
			})
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.dateRange = []
			this.resetForm('queryForm')
			this.handleQuery()
		},
		// 截屏
		screenshot() {
			if (!this.deviceInfo.id) {
				this.$message({
					message: this.$t('equipment.noEquipment'),
					type: 'warning',
					showClose: true,
				})
				return
			}
			const deviceId = this.deviceInfo.id
			this.$confirm(this.$t('equipment.screenCapture'), this.$t('tip'), {
				confirmButtonText: this.$t('submitText'),
				cancelButtonText: this.$t('cancelText'),
				type: 'warning',
			})
				.then(function() {
					return shotImage(deviceId)
				})
				.then(() => {
					this.getDeviceInfo()
					this.msgSuccess(this.$t('operationSuccess'))
				})
				.catch(function() {})
		},
		mClose() {
			this.mOpen = false
		},
		/** 查询分组名称下拉树结构 */
		getGroupTree() {
			groupTree({ deptId: this.deptId, groupId: 43 }).then((response) => {
				this.groupOptions = response.data
				this.groupDict = []
				const findChildren = (arr, list) => {
					for (let i = 0; i < arr.length; i++) {
						if (arr[i].id) {
							list.push(arr[i])
						}
						if (arr[i].children && arr[i].children.length) {
							findChildren(arr[i].children, list)
						}
					}
				}
				findChildren(this.groupOptions, this.groupDict)
			})
		},
		/** 查询机构名称下拉树结构 */
		getDeptTree() {
			deptTree().then((response) => {
				if (response.data && response.data.length > 0) {
					this.deptOptions = this.handleTree(
						response.data,
						'deptId',
						'parentId',
						'children',
						response.data[0].parentId
					)
				} else {
					this.deptOption = []
				}
			})
		},
		/** 转换机构数据结构 */
		deptNormalizer(node) {
			if (node.children && !node.children.length) {
				delete node.children
			}
			return {
				id: node.deptId,
				label: node.name,
				children: node.children,
			}
		},
		/** 转换分组数据结构 */
		normalizer(node) {
			if (node.children && !node.children.length) {
				delete node.children
			}
			return {
				id: node.id,
				label: node.name,
				children: node.children,
			}
		},
		// 认证
		handleAuth(row) {
			const id = row.id
			getDevice(id).then((response) => {
				this.authForm = response.data
				this.authOpen = true
			})
		},
		authSubmitForm: function() {
			this.$refs['authForm'].validate((valid) => {
				if (valid) {
					this.authForm.deptName = getLabelByValInTree(
						this.deptOptions,
						this.authForm.deptId,
						{
							label: 'name',
							value: 'deptId',
						}
					)
					this.authForm.groupName = getLabelByValInTree(
						this.groupDict,
						this.authForm.groupId,
						{
							label: 'name',
							value: 'id',
						}
					)
					this.authForm.status = '1'
					editDevice(this.authForm).then((response) => {
						if (response.code === 0) {
							this.msgSuccess(this.$t('certificationSuccess'))
							this.authOpen = false
							this.getList()
						} else {
							this.msgError(response.msg)
						}
					})
				}
			})
		},
		// 取消按钮
		authCancel() {
			this.authOpen = false
		},
	},
}
</script>

<style lang="scss" scoped>
.app-container {
	.custom-dialog {
		.el-select {
			width: 100%;
		}
	}
}
</style>
